import React from 'react'
import { Image, StyleSheet, Text, View } from 'react-native'

type Props = {
  info : UserInfo // 从外部定义类型
}


// export default function InfoView(props:Props) {
//   console.log('infoview  render...'); // 每次在父组件点击按钮  整个组件都会重新绘制一次
  
//   const {info} = props
//   return (
//     <View style={styles.content}>
//     <Image style={styles.img} source={{uri:info.avatar || 'https://profile-avatar.csdnimg.cn/default.jpg!1'}} />
//     <Text style={styles.txt}>{info.name} </Text>
//     <View style={styles.infoLayout}>
//       <Text style={styles.infoTxt}>
//         {info.desc}
//       </Text>
//     </View>
//   </View>
//   )
// }


export default React.memo (function InfoView(props:Props) {
  console.log('infoview  render...'); // 每次在父组件点击按钮  整个组件都会重新绘制一次
  
  const {info} = props
  return (
    <View style={styles.content}>
    <Image style={styles.img} source={{uri:info.avatar || 'https://profile-avatar.csdnimg.cn/default.jpg!1'}} />
    <Text style={styles.txt}>{info.name} </Text>
    <View style={styles.infoLayout}>
      <Text style={styles.infoTxt}>
        {info.desc}
      </Text>
    </View>
  </View>
  )
}, (preProps:Props , nextProps:Props)=>{
  // 比较新旧props 是否相等  如果为true 那么使用旧的缓存   如果是false  那么就会刷新
  return JSON.stringify(preProps.info) === JSON.stringify(nextProps.info)
})





const styles = StyleSheet.create({
  content: {
    width: '100%',
    height: '100%',
    backgroundColor: '#cfcfcf',
    flexDirection: 'column',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingTop: 64,
  },
  img: {
    width: 96,
    height: 96,
    borderRadius: 48,
    borderWidth: 4,
    borderColor: '#00000080',
  },
  txt: {
    fontSize: 24,
    color: '#333333',
    fontWeight: 'bold',
    marginTop: 32,
  },
  infoLayout: {
    width: '90%',
    padding: 16,
    backgroundColor: '#EAEAEA',
    borderRadius: 12,
    marginTop: 24,
  },
  infoTxt: {
    fontSize: 16,
    color: '#666666',
  },
});
